<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex布局</title>
		<style>
			.wrapper {
				height: 900px;
				width: 600px;
				border: 1px solid;
				display: flex;/*设置为弹性*/
				/*flex-wrap: wrap;/*设置为换行*/
				/*flex-direction: column-reverse;/*column-reverse设置为垂直镜像*/
				flex-direction: column;/*row-reverse设置为水平镜像*/
				/*flex-flow: row wrap;/*组合技*/
				/*justify-content: space-between;/*两边的元素贴边，其余均等*/
				justify-content: center;/*水平居中*/
				/*justify-content: space-around;/*边上的宽度是元素于元素之间间距的一半*/
				justify-content: space-evenly;/*边上的宽度等于元素之间的间距*/
				/*align-items: stretch;/*当子项没有高度时，自动铺满父项*/
				align-items: center;/*上下居中*/
				/*align-items: flex-end;/*贴底*/
			}
			 .div1 {
			 	width: 180px;
			 	height: 200px;
			 	background-color: red;
			 }
			 .div2 {
			 	width: 180px;
			 	height: 200px;
			 	background-color: green;
			 }
			 .div3 {
			 	width: 180px;
			 	height: 200px;
			 	background-color: dodgerblue;
			 }
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
			<!--<div class="div1">div4</div>-->
		</div>
	</body>
</html>
